<template>
  <el-card>
    <FilterBox :column="column" :data-obj.sync="listQuery" @search="fetchData" @resetHandler="resetData" />
    <el-row class="mt10 mb10">
      <el-button type="primary" @click="toAdd(1)">新增成卷线材</el-button>
      <el-button type="primary" @click="toAdd(2)">新增异性线材</el-button>
    </el-row>
    <Table :field-list="fieldList" :data="list">
      <template v-slot:set="{ row }">
        <el-button type="text" @click="toEdit(row)">编辑</el-button>
        <el-button type="text" @click="toDetail(row)">详情</el-button>
        <el-button type="text" @click="doTrans(row)">转义</el-button>
        <el-button class="color-red" type="text" @click="delHandler(row)">删除</el-button>
      </template>
    </Table>
    <Pagination v-show="listQuery.total > 0" :total="listQuery.total" :page.sync="listQuery.pageNumber"
      :limit.sync="listQuery.pageSize" @pagination="fetchData" />
  </el-card>
</template>

<script>
import { getSecCates, getProductList, delProduct, trans } from '@/api/index'
import FilterBox from '@/components/FilterBox/index.vue'
import Table from '@/components/Table/index.vue'
import Pagination from '@/components/Pagination/index.vue'
export default {
  name: '产品中心',
  components: { FilterBox, Table, Pagination },
  data() {
    return {
      currentRole: 'adminDashboard',
      listQuery: {
        pageNumber: 1,
        pageSize: 20,
        total: 0
      },
      column: [
        {
          type: 'select',
          label: '类型',
          fieldName: 'secCate',
          list: () => this.lst_cate,
          labelField: 'secCate',
          valueField: 'id'
        },
        {
          type: 'input',
          label: '名称',
          fieldName: 'name',
          labelField: 'name',
          valueField: 'name'
        }
      ],
      fieldList: [
        { label: '操作', prop: 'set', type: 'slot', slotName: 'set', width: '200' },
        { label: '产品名称', prop: 'product_name', minWidth: '120' },
        { label: '推荐到首页', prop: 'top', width: '100' },
        { label: '创建时间', prop: 'createtime_text', width: '160' },
        { label: '更新时间', prop: 'updatetime_text', width: '160' },
      ],
      list: [],
      lst_cate: []
    }
  },
  async created() {
    let res = await getSecCates()
    this.lst_cate = res.data.map(e => {return {id:e, name: e  }}) || []
    this.fetchData()
  },
  methods: {
    async doTrans(row) {
      const res = await trans(row.id)
       const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (res.code == 1) {
        this.$message.success('转义成功')
      } else {
        this.$message.error('转义失败')
      }
      loading.close()
    },
    searchHandle() {
      this.listQuery.pageNumber = 1
      this.fetchData()
    },
    resetData (){
      this.listQuery.pageNumber = 1
      this.fetchData()
    },
    async delHandler({ id }) {
      if (!id) return
      await this.$confirm('确认删除该产品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delProduct({ id })
      this.$message.success('删除成功')
      this.fetchData()
    },
    async fetchData() {
      let res = await getProductList(this.listQuery)
      this.list = res?.data?.list.map(v => {
        v.content = JSON.parse(v.content || '{}')
        v.product_name = v.content.product_name
        v.top = v.content.top ? '是' : '否'
        return v
      }) || []
      this.listQuery.total = res.data.total
    },
    toAdd(type = 1) {
      this.$router.push(`/add-product?type=${type}`)
    },
    toEdit(row) {
      this.$router.push(`/edit-product?id=${row.id}&type${row.type}`)
    },
    toDetail(row) {
      this.$router.push(`/product-detail?id=${row.id}&type${row.type}`)
    },
  }
}
</script>
